// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form, Radio,Button,Popconfirm, Modal, Row, Col, Input, Select, Cascader, Icon, Checkbox, Tabs, DatePicker, message } from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './userDetailStyle.less'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
import moment from 'moment';

const FormItem = Form.Item
const { RangePicker } = DatePicker
const { Option } = Select;
const CheckboxGroup = Checkbox.Group;
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const userDetailView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFields, setFieldsValue ,validateFieldsAndScroll} = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model
  let { query, actionType, btnLoading,indeterminate  ,checkAll} = modelObj

  const formItemLayoutPro = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
  };
  const formItemLayoutPro1 = {
    labelCol: { span: 3 },
    wrapperCol: { span: 14 },
  };
  const formItemLayoutForTime = {
    labelCol: { span: 2 },
    wrapperCol: { span: 20 },
  };

  function goback(){
    hashHistory.push({
      pathname: '/home/expandManage/userList',
      query: {}
    });
  }
  //输入框改变时
  function inputChange(e, name) {
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {
        query: {
          ...query,
          [name]: e,
        }
      }
    })
  }
  // 单选框改变时
  function radioChange(value,name) {
    let obj = {[name]: value}
    query = Object.assign(query, obj)
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {query}
    })
  }
  function submit(){
    validateFieldsAndScroll((err) => {
      if (err) {
        return false
      } else {
        dispatch({
          type: `${namespace}/submit`,
          payload: {}
        })
      }
    })
  }

  return (
    <div className='public_listMain'>
      <div className={"functionButton"}>
        <Popconfirm placement="top" title={"是否确认关闭，确认后关闭页面，不保存数据。"} onConfirm={() => goback()} okText="确定" cancelText="取消">
          <Button>返回</Button>
        </Popconfirm>
        <Button type='primary' onClick={e => submit()} loading={btnLoading}>提交</Button>
      </div>

      <CollapsiblePanels title="用户信息" hideUpDownBtn={true} >
      <Row>
        <Col span={8}>
          <FormItem label='登录账号'  {...formItemLayoutPro}>
            {getFieldDecorator('loginName', {
              rules: [{
                required: true, whitespace: true, message: '请输入登录账号'
              }],
              initialValue: query.loginName
            })(
              <Input disabled={actionType == 'detail'} placeholder='请输入登录账号' onChange={(e) => { inputChange(e.target.value, 'loginName') }} />
            )}
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span={8}>
          <FormItem label='姓名'  {...formItemLayoutPro}>
            {getFieldDecorator('name', {
              rules: [{
                required: true, whitespace: true, message: '请输入姓名'
              }],
              initialValue: query.name ? query.name + '' : undefined
            })(
              <Input disabled={actionType == 'detail'} placeholder='请输入姓名' onChange={(e) => { inputChange(e.target.value, 'name') }} />
            )}
          </FormItem>
        </Col>
      </Row>
      <Row>
          <Col span={8}>
            <FormItem label='备注'  {...formItemLayoutPro}>
              {getFieldDecorator('remarks', {
                rules: [{
                  required: false, whitespace: true, message: '请输入备注'
                }],
                initialValue: query.remarks
              })(
                <Input disabled={actionType == 'detail'} placeholder='请输入备注' onChange={(e) => { inputChange(e.target.value, 'remarks') }} />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <FormItem label='是否禁用'  {...formItemLayoutPro}>
              {getFieldDecorator('status', {
                rules: [{
                  required: false, whitespace: true, message: '请选择'
                }],
                initialValue: query.status
              })(
                <Radio.Group name="status" onChange={(e) => { radioChange(e.target.value, 'status') }}>
                    <Radio value='1'>是</Radio>
                    <Radio value='0'>否</Radio>
                </Radio.Group>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
        <Col span={8}>
            <FormItem label='App角色'  {...formItemLayoutPro}>
              {getFieldDecorator('appRoleZituo', {
                rules: [{
                  required: true, whitespace: true, message: '请选择App角色'
                }],
                initialValue: query.appRoleZituo
              })(
                <Select disabled={actionType == 'detail'} placeholder='请选择App角色' onChange={(e) => { inputChange(e, 'appRoleZituo') }}>
                  <Select.Option value="1">渠道经理</Select.Option>
                  <Select.Option value="2">渠道主管</Select.Option>
                  <Select.Option value="3">渠道专员</Select.Option>
                  <Select.Option value="4">小蜜蜂</Select.Option>
                  <Select.Option value="5">关键人</Select.Option>
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
      </CollapsiblePanels>
    </div>
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(userDetailView))